import dayjs from 'dayjs';
import { useMount } from 'ahooks';
import { Form, Input, Select, DatePicker } from 'antd';
import { useState } from'react';


const EditMobilePhoneInfo = (props: any) => {
    const {formModal, rowItem} = props;
    const { form } = formModal;

    useMount(() => {
        form.setFieldsValue({
            mobileType: rowItem.mobileType? rowItem.mobileType : '',
            mobileSystem: rowItem.mobileSystem? rowItem.mobileSystem : null,
            mobileOperateStatus: rowItem.mobileOperateStatus? rowItem.mobileOperateStatus.toString() : null,
            mobileUsePerson: rowItem.mobileUsePerson? rowItem.mobileUsePerson : '',
            mobileUseDate: rowItem.mobileUseDate? dayjs(rowItem.mobileUseDate) : '',
            ...rowItem.rest
        });
    }); 
    const mobileOperateStatusOptions = [
        { value: '1', label: '闲置' },
        { value: '2', label: '借用中' },
        { value: '3', label: '已损坏' },
        { value: '4', label: '维修中' },
        { value: '5', label: '已退回' },
    ];


    return (
        <>
            <Form name="editMobilePhoneInfo" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} form={form}>
                <div>
                    <Form.Item label="手机型号" name="mobileType" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item label="操作系统" name="mobileSystem" rules={[{ required: true, message: '请选择' }]}>
                        <Select
                            placeholder="请选择"
                            options={[
                                { value: 'Android', label: 'Android' },
                                { value: 'IOS', label: 'IOS' },
                                { value: 'Windows', label: 'Windows' },
                                { value: 'Mac', label: 'Mac' },
                                { value: 'Linux', label: 'Linux' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="状态" name="mobileOperateStatus" rules={[{ required: true, message: '请选择' }]}>
                        <Select 
                            placeholder="请选择"
                            options={mobileOperateStatusOptions}
                        />
                    </Form.Item>
                    <Form.Item label="借用人" name="mobileUsePerson">
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item label="借用时间" name="mobileUseDate">
                        <DatePicker style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item label="备注" name="remark">
                        <Input.TextArea rows={3} placeholder="请输入" />
                    </Form.Item>
                </div>
            </Form>
        </>
    );
}

export default EditMobilePhoneInfo;